<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ECharts</title>
<!--   引入 echarts.js -->
  <script src="/page/echarts.js"></script>
  <!-- 引入 jQuery.js -->
  <script src="/page/jquery-3.7.0.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 1000px;height:550px;"></div>
<script type="text/javascript">
  var chartDom = document.getElementById('main');
  var myChart = echarts.init(chartDom);
  var option;

  $.get('http://localhost:8080/NovelTypeClick', function (data) {
    var novelTypes = data.map(function(item) {
      return item.novelType;
    });
    var typeNums = data.map(function(item) {
      return item.typeNum;
    });
    var avgClicks = data.map(function(item) {
      return item.avgClick;
    });

    // 配置图表选项
    var option = {
      title: {
        text: '不同类型小说的平均点击量',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      xAxis: {
        type: 'category',
        data: novelTypes,
        axisLabel: {
          interval: 0
        }
      },
      yAxis: [
        {
          type: 'value',
          name: '类型数量',
          min: 0,
          position: 'left'
        },
        {
          type: 'value',
          name: '平均点击量',
          min: 0,
          position: 'right'
        }
      ],
      series: [{
        name: '类型数量',
        type: 'line', // 平直折线
        data: typeNums,
        smooth: true,
        yAxisIndex: 0,
        itemStyle: {
          normal: {
            color: '#FF0000' // 设置颜色
          }
        }
      },
        {
          name: '平均点击量',
          type: 'bar',
          data: avgClicks,
          yAxisIndex: 1,
          itemStyle: {
            normal: {
              color: '#00A0E9' // 设置颜色
            }
          }
        }]
    };
    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }
  });
</script>
</body>
</html>
